<template>
  <div>
    <div class='page'>
    <swiper class="swiper" :indicator-dots="indicatorDots" autoplay="true" interval="4000" duration="1000">
        <block v-for="(item, index) in images" :index="index" :key="item">
            <swiper-item @click="swipclick(item.id)">
                <image :src="item.url" class="slide-image" mode="aspectFill" />
            </swiper-item>
        </block>
    </swiper>
      <!-- <button bindtap="changeIndicatorDots"> indicator-dots </button>
      <button bindtap="changeAutoplay"> autoplay </button>
      <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
      <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration -->

    <!-- <div class="scroll-x">
      <ul>
        <li :key="classify" v-for="classify of Menu" v-bind:class="{active: classify === classifyA}" v-on:click="choose(classify)">{{classify}}</li>
      </ul>
    </div> -->
    <!--con-->
    <!-- <div style="padding-top: 150rpx"></div> -->
    <div  v-if="classifyA === '推荐'">
      <p style="color: white;text-align:center;">{{refresh}}</p>
        <!--广告位-->
        <div :key="article" v-for="article of recommendArticle" class="art">
          <!--三种图片三种样式-->
          <div class="a" v-if="article[0].num === 0">
            <div class="thumbnail" @click='jumpClick(article[0].html, article[0].title)'>
              <h4>{{article[0].title}}<br><h6>{{article[0].summary}}</h6></h4>
            </div>
          </div>
          <div class="a" v-if="article[0].num !== 0">
            <div class="thumbnail" @click='jumpClick(article[0].html, article[0].title)'>
              <img :src="article[0].image_one" alt="" style="width: 100%;margin-bottom: 1rem;">
              <h4>{{article[0].title}}<br><h6>{{article[0].summary}}</h6></h4>
            </div>
          </div>
        </div>
      <!-- <p style="color: white;text-align:center;height:300rpx;">再往上拉拉看</p>       -->
        <p @click="up" class="up">刷新</p>
        <p style="height: 40rpx;"></p>
        <br>
    </div>
    <div v-if="classifyA !== '推荐'" :key="article" v-for="article of allArticle.article_con" class="art">
      <div class="a">
        <div class="thumbnail" @click='jumpClick(article.html, article.title)'>
          <h4>{{article.title}}<br><h6>{{article.summary}}</h6></h4>
        </div>
      </div>
    </div>
    <p style="height:300rpx"></p>
    </div>
  </div>
</template>
<script>

import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
// import Card from '@/components/Card'
// import TopSwiper from '@/components/TopSwiper'
export default {
  components: {
    // Card,
    // TopSwiper
  },
  data () {
    return {
      ad: [],
      refresh: '下拉刷新有毒慎用',
      allArticle: [],
      recommendArticle: [],
      books: [],
      page: 0,
      more: true,
      tops: [],
      classifyA: '推荐',
      Menu: [
        '推荐',
        '时尚',
        '美食',
        '健康',
        '幽默',
        '教育',
        '文摘',
        '科技',
        '汽车',
        '体娱',
        '旅行'
      ],
      images: [
        {
          id: '1',
          url:'https://www.rrjiaoyi.com/ad/small/ad2.png'
        },
        {
          id: '2',
          url:'https://www.rrjiaoyi.com/ad/small/ad.png'
        }
      ],
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000
    }
  },
  methods: {
    // ad
    async adGet() {
      // wx.setStorage({
      //     key:"ad",
      //     data: await get2('api/ad', {})
      // })
      return await get2('api/ad', {})
    },
    // 跳小程序
    swipclick(e) {
      console.log('ad', this.ad)
      // console.log('ad2', wx.getStorageSync('ad').data[0].a1)
      switch (e) {
        case '1':
          // let a = {
          // appId: "wx698b6efdee816498",
          // path: "page/news/index",
          // extarData: {
          //   open: 'auth'
          // },
          // success(res) {
          // }
          // }
          // console.log('a', a)
          // wx.navigateToMiniProgram(a) 
          wx.navigateTo({
            url: `/pages/web-view/main?path=${encodeURIComponent('https://mp.weixin.qq.com/s/q726j7HWw_fTwUtSOH7Shw')}`
          })
          break
        case '2':
          let b = {
          appId: "wx698b6efdee816498",
          path: "page/news/index",
          extarData: {
            open: 'auth'
          },
          success(res) {
          }
          }
          console.log('b', b)
          wx.navigateToMiniProgram(b) 
          break
      }
    },
    up() {
    this.getList()
    wx.pageScrollTo({
    scrollTop: 0,
    duration: 0
    })
    },
    jumpClick (art, title) {
      // console.log(`/pages/web-view/main?path=${encodeURIComponent(art)}`)
      // window.sessionStorage.setItem('art', JSON.stringify({url: url, title: title}))
      wx.setStorage({
        key: 'art',
        data: `${JSON.stringify({url: art, title: title})}`
      })
      wx.navigateTo({
        url: `/pages/web-view/main?path=${encodeURIComponent(art)}`
      })
    },
    async getList () {
      wx.showNavigationBarLoading()
      let pcid = wx.getStorageSync('pcid')
      const recommendArticle = await post('article/recommendByPC',{} ,{'pcid': pcid})
      this.recommendArticle = recommendArticle
      wx.hideNavigationBarLoading()
      // console.log('allArticle', recommendArticle)
    },
    async choose(tab) {
      this.classifyA = tab
      wx.showNavigationBarLoading()
      const allArticle = await post(`article/bytype?type=${tab}`)
      // console.log('allArticle', allArticle)
      this.allArticle = allArticle
      wx.hideNavigationBarLoading()
    }
    // async getList (init) {
    //   if (init) {
    //     this.page = 0
    //     this.more = true
    //   }
    //   wx.showNavigationBarLoading()
    //   const books = await get('/weapp/booklist', {page: this.page})
    //   if (books.list.length < 10 && this.page > 0) {
    //     this.more = false
    //     console.log(this.more)
    //   }
    //   if (init) {
    //     this.books = books.list
    //     wx.stopPullDownRefresh()
    //   } else {
    //     // 下拉刷新，不能直接覆盖books 而是累加
    //     this.books = this.books.concat(books.list)
    //   }

    //   wx.hideNavigationBarLoading()
    // },
    // async getTop () {
    //   const tops = await get('/weapp/top')
    //   this.tops = tops.list
    // }
  },
  onPullDownRefresh () {
    // this.getList(true)
    // this.getTop()
    this.getList()
    // console.log('1111')
    wx.stopPullDownRefresh()
  },
  // onReachBottom () {
  //   this.getList()
  //   wx.pageScrollTo({
  //   scrollTop: 0,
  //   duration: 0
  //   })
    // if (!this.more) {
    //   // 没有更多了
    //   return false
    // }
    // this.page = this.page + 1
    // this.getList()
  // },
  // beforeCreate() {
  // },
  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    this.getList()

    // ad
    // this.adGet()
    // .then(result => {
    //   this.ad = result.data
    // })
  },
  onShow () {
    this.refresh = '下拉刷新有毒慎用'
    setTimeout(()=>{
      this.refresh = ''
    },2000)

    // 定位
    // wx.getLocation({
    //   type: 'wgs84',
    //   success: function(res){
    //     console.log("定位成功");
    //     var locationString = res.latitude + "," + res.longitude;
    //     wx.request({
    //       url: 'http://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1',
    //       data: {
    //         "key" : "YLFBZ-WHAWI-ZXUGH-53Q65-TOJ7E-ADBNQ",
    //         "location" : locationString
    //       },
    //       method: 'GET',
    //       // header: {}, 
    //       success: function(res){
    //         // success
    //         console.log("请求成功");
    //         console.log("请求数据:" + res.data.result.address);
    //       },
    //       fail: function() {
    //         // fail
    //         console.log("请求失败");
    //       },
    //       complete: function() {
    //         // complete
    //         console.log("请求完成");
    //       }
    //     })
    //   },
    //   fail: function() {
    //     // fail
    //     console.log("定位失败");
    //   },
    //   complete: function() {
    //     // complete
    //     console.log("定位完成");
    //   }
    // })
  },
  onReady() {
  },
  mounted () {
    let sharepath = this.$root.$mp.query.sharepath
    if (sharepath) {
      wx.navigateTo({
        url: `/pages/web-view/main?path=${sharepath}`
      })
    }
    // this.getList(true)
    // this.getTop()
  },
  // 轮播
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
  // swipclick: function (e) {
  //     // console.log(this.data.imageUrls[this.data.current]);
  //     console.log('1111111111111');
  // }
}
</script>
<style lang='scss'>
.page {
  background-color: #333;
  color: white;
  font-size: 12px;
}
// scroll-x
.scroll-x {
  font-size: 12px;
  z-index: 5;
  position: fixed;
  width: 750rpx;
  overflow-x: auto;
  -webkit-overflow-x: auto;
  overflow: hidden;
  -webkit-overflow-x: hidden;
  background-color: #1B1A20;
  margin: 0 auto;
  /*width: 25rem;*/
  -webkit-overflow-x: scroll;
  overflow-x: scroll;/*水平方向，超出部分添加滚动机制*/
  li {
    padding: 0 20rpx;
  }
  .active {
    color: #333;
    background-color: #FFD45A;
    border-radius: 5px;
    padding: 0 20rpx;
  }
  ul {
    display: flex;
    li {
      height: 60rpx;
      line-height: 60rpx;
      // color: white;
      flex: 1;
      white-space:nowrap; //不换行
      margin: 40rpx;
      // color: red;
    }
  }
  span {
    width: 500px;
  }
}
.art {
  padding:0 15rpx;
  text-align: left;
  .a {
    padding: 15rpx;
    text-decoration:none;
    h4 {
      line-height: 40rpx;
      font-size: 16px;
      color: #333;
    }
    h6 {
      font-size: 12px;
      color: #777
    }
  }
}
.thumbnail {
  color: black;
  display: block;
  padding: 20rpx;
  margin-bottom: 10rpx;
  // line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px
}
.up {
  text-align: center;
  color: #333;
  margin: 20rpx 35rpx;
  background-color: white;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 4px
  // margin-bottom: 40rpx;
}
.swiper {
  height: 176rpx !important;
  padding: 20rpx 30rpx;
}
.slide-image {
  height: 100%;
  width: 100%;
}
</style>
